<template>
  <view class="follow-container">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="title">我的关注</text>
    </view>
    
    <!-- 店铺列表 -->
    <view class="store-list">
      <view 
        class="store-item" 
        v-for="(store, index) in stores" 
        :key="index"
        @click="navigateToStore(store.id)"
      >
        <!-- 店铺名称 -->
        <view class="store-name">{{ store.name }}</view>
        
        <!-- 店铺数据 -->
        <view class="store-data">
          <text>月售 {{ store.monthlySales }}</text>
          <text>起送 {{ store.minOrder }}</text>
          <text>基础运费 {{ store.shippingFee }}</text>
        </view>
        
        <!-- 促销信息 -->
        <view class="promotion" v-if="store.promotion">
          {{ store.promotion }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stores: [
        {
          id: 1,
          name: "沃尔玛",
          monthlySales: "10000",
          minOrder: "0",
          shippingFee: "5",
          promotion: "VIP尊享89元减4元的运费券"
        },
        {
          id: 2,
          name: "永辉超市",
          monthlySales: "2000",
          minOrder: "0",
          shippingFee: "5",
          promotion: "联合利华洗护满10减5"
        }
      ]
    }
  },
  onLoad() {
    // 这里可以添加从服务器获取数据的逻辑
    // this.fetchFollowStores();
  },
  methods: {
    // 跳转到店铺页面
    navigateToStore(storeId) {
      uni.navigateTo({
        url: `/pages/shop/shop-detail?id=${storeId}`
      });
    },
    
    // 从服务器获取关注的店铺列表
    async fetchFollowStores() {
      try {
        const res = await uni.request({
          url: 'http://localhost:3000/hotList',
          method: 'GET'
        });
        
        if (res[0].statusCode === 200) {
          this.stores = res[0].data;
        }
      } catch (error) {
        console.error('获取关注店铺失败:', error);
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style lang="scss">
.follow-container {
  padding: 20rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
  
  .header {
    padding: 30rpx 0;
    border-bottom: 1rpx solid #eee;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .store-list {
    margin-top: 20rpx;
    
    .store-item {
      background-color: #fff;
      border-radius: 12rpx;
      padding: 25rpx;
      margin-bottom: 20rpx;
      
      .store-name {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
        color: #333;
      }
      
      .store-data {
        display: flex;
        margin-bottom: 15rpx;
        
        text {
          font-size: 28rpx;
          color: #666;
          margin-right: 40rpx;
          
          &:last-child {
            margin-right: 0;
          }
        }
      }
      
      .promotion {
        font-size: 26rpx;
        color: #ff4d4f;
        padding-top: 15rpx;
        border-top: 1rpx dashed #eee;
      }
    }
  }
}
</style>